<template>
	<view>
		<el-dialog :title="$t('auth.chooseAuth')" :visible.sync="dialogAuthTypeVisible" :close-on-press-escape="false"
			:close-on-click-modal="false" :show-close="false" :destroy-on-close="true" class="auth">
			<el-radio @change="changeAuthType(2)" v-model="authType" :label="2">{{ $t('auth.emailAuth') }}</el-radio>
			<el-radio @change="changeAuthType(1)" v-model="authType" :label="1">{{ $t('auth.appAuth') }}</el-radio>
		</el-dialog>

		<el-dialog :visible.sync="dialogAuthVisible" :close-on-press-escape="false" :close-on-click-modal="false"
			:show-close="false" :destroy-on-close="true" class="authCode">
			<view slot="title">
				<view v-if="authType == 1">{{ $t('auth.enterAppCode') }}：</view>
				<view v-else>
					{{ $t('auth.sendCode') }}
					<text class="text-green" v-if="email">{{ email }}</text>
				</view>
			</view>
			<div class="">
				<div v-if="authType === '2'" class="v-box h-fill">
					<el-input class="input-class" v-model="pin" :placeholder="$t('auth.enterEmailCode')"
						@keyup.enter.native="handleAuth"></el-input>
				</div>
				<div v-else class="h-fill">
					<el-input class="input-class" v-model="pin" :placeholder="$t('auth.enterAppCode')"
						@keyup.enter.native="handleAuth"></el-input>
				</div>
				<view class="h-box justify-end">
					<el-button :disabled="authSuccess" @click="cancelAuth" class="h-fill">{{ $t('auth.cancel') }}
					</el-button>
					<el-button :disabled="authSuccess" @click="handleAuth" type="primary" class="h-fill">
						{{ $t('auth.determine') }}
					</el-button>
				</view>
			</div>
		</el-dialog>
	</view>
</template>

<script>
	import {
		requestEmailPin,
		googleAuth,
		emailAuth
	} from "../../js_sdk/uni-admin/user.js"
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		name: "auth",
		data() {
			return {
				dialogAuthTypeVisible: false,
				dialogAuthVisible: false,
				authType: '',
				pin: '',
				authSuccess: false
			};
		},
		props: {
			user_id: {
				type: Number,
				default: 0
			},
			email: {
				type: String,
				default: ''
			},
			customAction: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			...mapMutations("user", ["SET_TOKEN", "SET_USER_INFO"]),
			startAuth() {
				this.pin = ''
				this.dialogAuthTypeVisible = true
			},
			async changeAuthType(type) {
				if (type == 2) {
					await requestEmailPin({
						user_id: this.user_id
					})
					this.dialogAuthTypeVisible = false
					this.dialogAuthVisible = true
				} else {
					this.dialogAuthTypeVisible = false
					this.dialogAuthVisible = true
				}
			},
			cancelAuth() {
				this.dialogAuthVisible = false
				this.authType = ''
			},
			async handleAuth() {
				if (!this.pin.trim()) {
					this.$message.error(this.$t('global.enterVerificationCode'))
					return
				}
				let res = undefined
				if (this.authType == 2) {
					res = await emailAuth({
						user_id: this.user_id,
						pin: this.pin
					})
				} else {
					res = await googleAuth({
						user_id: this.user_id,
						pin: this.pin
					})
				}
				this.dialogAuthVisible = false
				this.authSuccess = true
				if (this.customAction) {
					this.$emit('authSuccess', res.data)
				} else {
					this.SET_TOKEN({
						token: res.data.token
					})
					this.SET_USER_INFO(res.data)
					this.$message.success(this.$t('global.verificationBy'))
					// setTimeout(() => {
					// 	uni.navigateTo({
					// 		url: "../../pages/index/statisics"
					// 	})
					// }, 1000)
					uni.reLaunch({
						url: "../../pages/index/statisics"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
